<template>
    <div class="grid-layout">
        <div class="left">
            <h3>Grid 规则 - <span class="red">二维布局、IE暂不支持</span></h3>
            <h4>容器属性</h4>
            <p><span class="green bold">** display: grid;</span> => 块级元素grid布局</p>
            <p><span class="green bold">** display: inline-grid;</span> => 行内元素grid布局</p>

            <p><span class="green bold">grid-template-columns 属性</span> => 定义每一列的列宽，<span class="red">repeat</span>(重复次数或auto-fill自动填充，容纳尽可能多的单元格，要重复的值) 函数、<span class="red">fr 关键字</span>表示比例关系、<span class="red">minmax</span>(最小值，最大值)函数产生一个长度范围、<span class="red">auto</span>表示由浏览器自己决定长度、还可以使用<span class="red">方括号</span>，指定每一根网格线的名字</p>
            <ul>
                <li>grid-template-columns: 100px 100px 100px;</li>
                <li>grid-template-columns: 33.33% 33.33% 33.33%;</li>
                <li>grid-template-columns: repeat(3, 33.33%);</li>
                <li>grid-template-columns: repeat(2, 100px 20px 80px);</li>
                <li>grid-template-columns: repeat(auto-fill, 100px);</li>
                <li>grid-template-columns: 1fr 2fr;</li>
                <li>grid-template-columns: 1fr 1fr minmax(100px, 1fr);</li>
                <li>grid-template-columns: 100px auto 100px;</li>
                <li>grid-template-columns: [c1] 100px [c2] 100px [c3];</li>
            </ul>
            <p><span class="green bold">grid-template-rows 属性</span> => 定义每一行的行高，同grid-template-columns属性</p>
            <p><span class="green bold">grid-template-areas 属性</span> => 用于定义区域，由单个或多个单元格组成，某些区域不需要利用，则使用"点"（.）表示，区域的命名会影响到网格线 a-start、a-end</p>
            <p><span class="green bold">** grid-template 属性</span> => grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式</p>

            <p><span class="green bold">grid-auto-columns 属性</span> => 浏览器自动创建的多余网格的列宽</p>
            <p><span class="green bold">grid-auto-rows 属性</span> => 浏览器自动创建的多余网格的行高</p>

            <p><span class="green bold">** grid-auto-flow 属性</span> => 项目填充方式，默认row先行后列、column先列后行、row dense先行后列且尽可能紧密填满不出现空格、column dense先列后行且尽可能紧密填满不出现空格</p>

            <p><span class="green bold">** grid 属性</span> => grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式</p>

            <p><span class="green bold">grid-row-gap 属性</span> => 设置行与行的间隔 或 <span class="red">row-gap</span></p>
            <p><span class="green bold">grid-column-gap 属性</span> => 设置列与列的间隔 或 <span class="red">column-gap</span></p>
            <p><span class="green bold">** grid-gap 属性</span> => grid-row-gap和grid-column-gap的合并简写形式，或 <span class="red">gap</span>；省略了第二个值，浏览器认为第二个值等于第一个值</p>

            <p><span class="green bold">justify-items 属性</span> => 设置单元格内容的水平位置（左中右）start | end | center | stretch（默认值）</p>
            <p><span class="green bold">align-items 属性</span> => 设置单元格内容的垂直位置（上中下）start | end | center | stretch（默认值）</p>
            <p><span class="green bold">** place-items 属性</span> => align-items属性和justify-items属性的合并简写形式，如果省略第二个值，则浏览器认为与第一个值相等</p>

            <p><span class="green bold">justify-content 属性</span> => 整个内容区域在容器里面的水平位置（左中右）start | end | center | stretch（默认值） | space-around | space-between | space-evenly</p>
            <p><span class="green bold">align-content 属性</span> => 整个内容区域的垂直位置（上中下）start | end | center | stretch（默认值） | space-around | space-between | space-evenly</p>
            <p><span class="green bold">** place-content 属性</span> => align-content属性和justify-content属性的合并简写形式，如果省略第二个值，则浏览器认为与第一个值相等</p>
            
            <h4>项目属性</h4>
            <p><span class="green bold">grid-column-start 属性</span> => 左边框所在的垂直网格线，数字或者网格线的名字，<span class="red">span关键字</span> 表示左右边框（上下边框）之间跨越多少个网格；如果产生了项目的重叠，则使用<span class="red">z-index属性</span>指定项目的重叠顺序</p>
            <p><span class="green bold">grid-column-end 属性</span> => 右边框所在的垂直网格线...</p>
            <p><span class="green bold">grid-row-start 属性</span> => 上边框所在的水平网格线...</p>
            <p><span class="green bold">grid-row-end 属性</span> => 下边框所在的水平网格线...</p>
            <p><span class="green bold">** grid-column 属性</span> => grid-column-start和grid-column-end的合并简写形式，用 / 隔开，斜杠以及后面的部分可以省略，默认跨越一个网格</p>
            <p><span class="green bold">** grid-row 属性</span> => grid-row-start属性和grid-row-end的合并简写形式</p>
            <p><span class="green bold">** grid-area 属性</span> => 指定项目放在哪一个区域；还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置，用 / 隔开</p>
            <p><span class="green bold">justify-self 属性</span> => 设置单元格内容的水平位置（左中右）start | end | center | stretch（默认值）</p>
            <p><span class="green bold">align-self 属性</span> => 设置单元格内容的垂直位置（上中下）start | end | center | stretch（默认值）</p>
            <p><span class="green bold">** place-self 属性</span> => align-self属性和justify-self属性的合并简写形式，如果省略第二个值，place-self属性会认为这两个值相等</p>
        </div>
        <div class="right">
            <div class="right-top">
                <h3>操作Grid</h3>

                <h4 style="margin: 10px 0;">容器属性</h4>
                <span>第一行行高：</span>
                <input type="range" min="50" max="100" v-model="row1Height">{{row1Height}}px
                <span class="marginLeft">第一列列宽：</span>
                <input type="range" min="50" max="300" v-model="col1Width">{{col1Width}}px

                <span class="marginLeft">项目填充方式 grid-auto-flow：</span>
                <input class="cursor" type="radio" name="mode1" value="row" id="row1" v-model="mode">
                <label class="cursor" for="row1">row</label>
                <input class="cursor" type="radio" name="mode1" value="column" id="column1" v-model="mode">
                <label class="cursor" for="column1">column</label><br>

                <span>行间距 grid-row-gap/row-gap：</span>
                <input type="range" min="0" max="30" v-model="row1Gap">{{row1Gap}}px
                <span class="marginLeft">列间距 grid-column-gap/column-gap：</span>
                <input type="range" min="0" max="100" v-model="col1Gap">{{col1Gap}}px<br>

                <span>单元格水平位置 justify-items：</span>
                <input class="cursor" type="radio" name="mode2" value="start" id="justifyItems1" v-model="justifyItems">
                <label class="cursor" for="justifyItems1">start</label>
                <input class="cursor" type="radio" name="mode2" value="end" id="justifyItems2" v-model="justifyItems">
                <label class="cursor" for="justifyItems2">end</label>
                <input class="cursor" type="radio" name="mode2" value="center" id="justifyItems3" v-model="justifyItems">
                <label class="cursor" for="justifyItems3">center</label>
                <input class="cursor" type="radio" name="mode2" value="stretch" id="justifyItems4" v-model="justifyItems">
                <label class="cursor" for="justifyItems4">stretch</label><br>

                <span>单元格垂直位置 align-items：</span>
                <input class="cursor" type="radio" name="mode3" value="start" id="alignItems1" v-model="alignItems">
                <label class="cursor" for="alignItems1">start</label>
                <input class="cursor" type="radio" name="mode3" value="end" id="alignItems2" v-model="alignItems">
                <label class="cursor" for="alignItems2">end</label>
                <input class="cursor" type="radio" name="mode3" value="center" id="alignItems3" v-model="alignItems">
                <label class="cursor" for="alignItems3">center</label>
                <input class="cursor" type="radio" name="mode3" value="stretch" id="alignItems4" v-model="alignItems">
                <label class="cursor" for="alignItems4">stretch</label><br>

                <span>内容区域水平位置 justify-content：</span>
                <input class="cursor" type="radio" name="mode4" value="start" id="justifyContent1" v-model="justifyContent">
                <label class="cursor" for="justifyContent1">start</label>
                <input class="cursor" type="radio" name="mode4" value="end" id="justifyContent2" v-model="justifyContent">
                <label class="cursor" for="justifyContent2">end</label>
                <input class="cursor" type="radio" name="mode4" value="center" id="justifyContent3" v-model="justifyContent">
                <label class="cursor" for="justifyContent3">center</label>
                <input class="cursor" type="radio" name="mode4" value="stretch" id="justifyContent4" v-model="justifyContent">
                <label class="cursor" for="justifyContent4">stretch</label>
                <input class="cursor" type="radio" name="mode4" value="space-between" id="justifyContent5" v-model="justifyContent">
                <label class="cursor" for="justifyContent5">space-between</label><br>

                <span>内容区域垂直位置 align-content：</span>
                <input class="cursor" type="radio" name="mode5" value="start" id="alignContent1" v-model="alignContent">
                <label class="cursor" for="alignContent1">start</label>
                <input class="cursor" type="radio" name="mode5" value="end" id="alignContent2" v-model="alignContent">
                <label class="cursor" for="alignContent2">end</label>
                <input class="cursor" type="radio" name="mode5" value="center" id="alignContent3" v-model="alignContent">
                <label class="cursor" for="alignContent3">center</label>
                <input class="cursor" type="radio" name="mode5" value="stretch" id="alignContent4" v-model="alignContent">
                <label class="cursor" for="alignContent4">stretch</label>
                <input class="cursor" type="radio" name="mode5" value="space-between" id="alignContent5" v-model="alignContent">
                <label class="cursor" for="alignContent5">space-between</label>
                
                <h4 style="margin: 10px 0;">项目属性</h4>
                <span>单元格 5 水平位置 justify-self：</span>
                <input class="cursor" type="radio" name="mode6" value="start" id="justifySelf1" v-model="justifySelf">
                <label class="cursor" for="justifySelf1">start</label>
                <input class="cursor" type="radio" name="mode6" value="end" id="justifySelf2" v-model="justifySelf">
                <label class="cursor" for="justifySelf2">end</label>
                <input class="cursor" type="radio" name="mode6" value="center" id="justifySelf3" v-model="justifySelf">
                <label class="cursor" for="justifySelf3">center</label>
                <input class="cursor" type="radio" name="mode6" value="stretch" id="justifySelf4" v-model="justifySelf">
                <label class="cursor" for="justifySelf4">stretch</label><br>

                <span>单元格 5 垂直位置 align-self：</span>
                <input class="cursor" type="radio" name="mode7" value="start" id="alignSelf1" v-model="alignSelf">
                <label class="cursor" for="alignSelf1">start</label>
                <input class="cursor" type="radio" name="mode7" value="end" id="alignSelf2" v-model="alignSelf">
                <label class="cursor" for="alignSelf2">end</label>
                <input class="cursor" type="radio" name="mode7" value="center" id="alignSelf3" v-model="alignSelf">
                <label class="cursor" for="alignSelf3">center</label>
                <input class="cursor" type="radio" name="mode7" value="stretch" id="alignSelf4" v-model="alignSelf">
                <label class="cursor" for="alignSelf4">stretch</label><br>

                <span>单元格 1 跨行数 grid-row：</span>
                <input type="range" min="2" max="4" v-model="gridRow">{{gridRow}}
                <span class="marginLeft">单元格 1 跨列数 grid-column：</span>
                <input type="range" min="2" max="4" v-model="gridColumn">{{gridColumn}}<br>

            </div>
            <div class="right-bottom">
                <h3>效果区</h3>
                <div class="container" :style="{display: 'grid', gridTemplateColumns: col1Width + 'px auto auto', gridTemplateRows: row1Height + 'px auto auto', 'grid-auto-flow': mode, 'grid-row-gap': row1Gap + 'px', 'grid-column-gap': col1Gap + 'px', 'justify-items': justifyItems, 'align-items': alignItems, justifyContent: justifyContent, alignContent: alignContent}">
                    <div class="a" :style="{'grid-row': '1/' + gridRow, 'grid-column': '1/' + gridColumn}">1</div>
                    <div class="b">2</div>
                    <div class="c">3</div>
                    <div class="d">4</div>
                    <div class="e" :style="{justifySelf: justifySelf, alignSelf: alignSelf}">5</div>
                    <div class="f">6</div>
                    <div class="g">7</div>
                    <div class="h">8</div>
                    <div class="i">9</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            row1Height: 50,
            col1Width: 50,
            mode: 'row',
            row1Gap: 0,
            col1Gap: 0,
            justifyItems: 'stretch',
            alignItems: 'stretch',
            justifyContent: 'stretch',
            alignContent: 'stretch',
            justifySelf: 'stretch',
            alignSelf: 'stretch',
            gridRow: 2,
            gridColumn: 2
        }
    },
    computed: {
    },
}
</script>

<style lang="less" scoped>
@import '../css/common.less';
.grid-layout{
    display: flex;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: left;
    input[type='range']{
        padding: 0;
        width: 80px;
    }
    .left{
        flex: 32;
        border: 4px dashed @green;
        margin-right: 10px;
        padding: 10px;
        overflow: scroll;
        p{
            margin: 12px 0;
        }
    }
    .right{
        display: flex;
        flex: 68;
        flex-direction: column;
        .right-top{
            flex: 5;
            border: 4px dashed @blue;
            padding: 10px;
        }
        .right-bottom{
            flex: 5;
            border: 4px dashed @red;
            margin-top: 10px;
            padding: 10px;
            .container{
                display: grid;
                grid-template-columns: repeat(3, auto);
                grid-template-rows: repeat(3, auto);
                gap: 20px 20px;
                grid-template-areas: 'a b c' 'd e f' 'g h i';
                width: 100%;
                height: calc(100% - 67px);
                color: white;
                font-size: 30px;
                font-weight: bold;
                text-shadow: 1px 1px 2px black;
                .a{
                    background: #FF0000;
                    // grid-column: 1 ~'/' 3;
                    // grid-row: 1 ~'/' 3;
                }
                .b{
                    background: #FF6600;
                }
                .c{
                    background: #FFFF00;
                }

                .d{
                    background: #33FF00;
                }
                .e{
                    background: #00FFFF;
                }
                .f{
                    background: #0000FF;
                }

                .g{
                    background: #FF00CC;
                }
                .h{
                    background: #9900FF;
                }
                .i{
                    background: #DDFF00;
                }
            }
        }
    }
}
</style>